<template>
	<view class="container">
		<!-- 消息提醒设置 -->
		<view class="notification-tip" @click="openNotificationSettings">
			<uni-icons type="notification" size="16" color="#1989fa"></uni-icons>
			<text>当前无法获取新消息提醒，点击设置</text>
		</view>

		<!-- 今日热榜轮播 -->
		<view class="hot-list-container">
			<swiper class="hot-list-swiper" vertical autoplay circular interval="3000">
				<swiper-item v-for="(item, index) in hotList" :key="index">
					<view class="hot-item">
						<text class="hot-rank">{{ index + 1 }}.</text>
						<text class="hot-text">{{ item }}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 问题详情卡片 -->
		<view class="question-card" :style="{transform: 'rotateY(5deg)'}">
			<view class="question-header">
				<image class="avatar" src="/static/avatar/1.jpg" mode="aspectFill"></image>
				<text class="username">a</text>
				<text class="view-count">·735次围观</text>
				<text class="time">14小时前</text>
				<button class="report-btn" size="mini" @click="reportQuestion">举报</button>
			</view>

			<text class="question-content">问大家，有没有好用的去黑头产品?一搜全是广</text>

			<view class="question-footer">
				<text class="tag">#日常投稿</text>
				<view class="actions">
					<button class="action-btn" size="mini" @click="supportQuestion">帮顶</button>
					<button class="action-btn" size="mini" @click="shareQuestion">分享</button>
					<button class="action-btn" size="mini" @click="likeQuestion">
						<uni-icons type="hand-up" size="16" color="#666"></uni-icons>
						<text>0很赞</text>
					</button>
				</view>
			</view>
		</view>

		<!-- 加入群聊提示 -->
		<view class="group-tip">
			<text>点我加入学校集市同步群</text>
			<text>添加墙墙拉你进群</text>
		</view>

		<!-- 评论标题 -->
		<view class="comment-header">
			<text class="comment-title">评论(3)</text>
			<picker class="sort-picker" mode="selector" :range="sortOptions" @change="changeSort">
				<view class="picker-content">
					<text>{{ sortOptions[sortIndex] }}</text>
					<uni-icons type="arrowdown" size="14" color="#666"></uni-icons>
				</view>
			</picker>
		</view>

		<!-- 评论列表 -->
		<view class="comment-list">
			<view v-for="(comment, index) in comments" :key="index" class="comment-card" :style="{
          transform: `rotateY(${index % 2 === 0 ? '5deg' : '-5deg'})`,
          zIndex: comments.length - index
        }">
				<image class="avatar" :src="comment.avatar" mode="aspectFill"></image>
				<view class="comment-content">
					<view class="comment-header">
						<text class="username">{{ comment.username }}</text>
						<text class="time">{{ comment.time }}</text>
					</view>
					<text class="comment-text">{{ comment.content }}</text>
				</view>
			</view>
		</view>

		<!-- 底部发布栏 -->
		<view class="footer-bar">
			<input class="comment-input" placeholder="发表评论..." v-model="newComment" @confirm="submitComment" />
			<button class="send-btn" @click="submitComment">发布</button>
		</view>

		<text class="copyright" v-if="false">逛逛校园圈@2025</text>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 模拟数据
	const hotList = ref([
		'有没有可以8月一起去武汉看*晗演唱会的呀?',
		'恶意评论、恶',
		'新区浴室几点开门啊',
		'明天图书馆主楼闭馆去哪里背书啊'
	])

	const comments = ref([{
			avatar: '/static/avatar/1.jpg',
			username: 'rnw',
			time: '9小时前',
			content: '卡布拉'
		},
		{
			avatar: '/static/avatar/2.jpg',
			username: 'rnw',
			time: '13小时前',
			content: 'RNW的好用，用了十来片了'
		}
	])

	const sortOptions = ref(['热度', '时间'])
	const sortIndex = ref(0)
	const newComment = ref('')

	// 方法
	const openNotificationSettings = () => {
		uni.navigateTo({
			url: '/pages/settings/notification'
		})
	}

	const reportQuestion = () => {
		uni.showToast({
			title: '已举报',
			icon: 'success'
		})
	}

	const supportQuestion = () => {
		uni.showToast({
			title: '已帮顶',
			icon: 'success'
		})
	}

	const shareQuestion = () => {
		uni.showToast({
			title: '已分享',
			icon: 'success'
		})
	}

	const likeQuestion = () => {
		uni.showToast({
			title: '已点赞',
			icon: 'success'
		})
	}

	const changeSort = (e) => {
		sortIndex.value = e.detail.value
	}

	const submitComment = () => {
		if (!newComment.value.trim()) return

		comments.value.unshift({
			avatar: 'https://pic3.zhimg.com/v2-6b3f9b3e3c3c9e3b3e3c3c9e3b3e3c3_l.jpg',
			username: '当前用户',
			time: '刚刚',
			content: newComment.value
		})

		newComment.value = ''
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	}

	const switchTab = (tab) => {
		uni.showToast({
			title: `切换到${tab}`,
			icon: 'none'
		})
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
		background-color: #fff5f7; // 浅粉色背景
		min-height: 100vh;
		position: relative;
		padding-bottom: 200rpx;

		.notification-tip {
			display: flex;
			align-items: center;
			background-color: #e6f7ff;
			padding: 16rpx 20rpx;
			border-radius: 8rpx;
			margin-bottom: 20rpx;

			uni-icons {
				margin-right: 10rpx;
			}

			text {
				font-size: 24rpx;
				color: #1989fa;
			}
		}

		.hot-list-container {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

			.hot-list-swiper {
				height: 80rpx;

				.hot-item {
					display: flex;
					align-items: center;
					height: 100%;
					font-size: 28rpx;
					color: #333;

					.hot-rank {
						color: #ff4d4f;
						margin-right: 16rpx;
						font-weight: bold;
					}
				}
			}
		}

		.question-card {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			transition: all 0.3s ease;
			perspective: 1000px;
			transform-style: preserve-3d;

			&:active {
				transform: scale(0.98) rotateY(0deg);
			}

			.question-header {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				
				.avatar{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.username {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-right: 10rpx;
				}

				.view-count,
				.time {
					font-size: 24rpx;
					color: #999;
					margin-right: 10rpx;
				}

				.report-btn {
					margin-right: 20rpx;
					font-size: 24rpx;
					color: #666;
					background-color: transparent;
					border: none;
					padding: 10rpx;
					line-height: 1;
				}
			}

			.question-content {
				font-size: 30rpx;
				color: #333;
				line-height: 1.5;
				margin-bottom: 20rpx;
			}

			.question-footer {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.tag {
					font-size: 24rpx;
					color: #1989fa;
					background-color: #e6f7ff;
					padding: 6rpx 16rpx;
					border-radius: 30rpx;
				}

				.actions {
					display: flex;

					.action-btn {
						margin-left: 16rpx;
						font-size: 24rpx;
						color: #666;
						background-color: #f5f5f5;
						border: none;
						display: flex;
						align-items: center;

						uni-icons {
							margin-right: 6rpx;
						}
					}
				}
			}
		}

		.group-tip {
			background-color: #fff8e6;
			padding: 16rpx 20rpx;
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;

			text {
				font-size: 24rpx;
				color: #ff9900;

				&:first-child {
					margin-bottom: 8rpx;
				}
			}
		}

		.comment-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.comment-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}

			.sort-picker {
				.picker-content {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #666;

					uni-icons {
						margin-left: 8rpx;
					}
				}
			}
		}

		.comment-list {
			.comment-card {
				display: flex;
				background-color: #fff;
				border-radius: 16rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
				transition: all 0.3s ease;
				perspective: 1000px;
				transform-style: preserve-3d;

				&:active {
					transform: scale(0.98) rotateY(0deg);
				}

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.comment-content {
					flex: 1;

					.comment-header {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;

						.username {
							font-size: 28rpx;
							font-weight: bold;
							color: #333;
							margin-right: 16rpx;
						}

						.time {
							font-size: 24rpx;
							color: #999;
						}
					}

					.comment-text {
						font-size: 28rpx;
						color: #333;
						line-height: 1.4;
					}
				}
			}
		}

		.footer-bar {
			position: fixed;
			bottom: 0rpx;
			left: 0;
			right: 0;
			height: 100rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			border-top: 1rpx solid #f0f0f0;

			.comment-input {
				flex: 1;
				height: 70rpx;
				background-color: #f5f5f5;
				border-radius: 35rpx;
				padding: 0 24rpx;
				font-size: 28rpx;
				margin-right: 20rpx;
			}

			.send-btn {
				width: 120rpx;
				height: 70rpx;
				line-height: 70rpx;
				background-color: #1989fa;
				color: #fff;
				border-radius: 35rpx;
				font-size: 28rpx;
			}
		}

		
		.copyright {
			position: fixed;
			bottom: 120rpx;
			left: 0;
			right: 0;
			text-align: center;
			font-size: 24rpx;
			color: #999;
		}
	}
</style>